<script setup>
import { ref } from 'vue'

import { statusOfMaintennance } from '@/common/dict/dictCollect'

const emit = defineEmits('finish')
const props = defineProps({
    type: String
})

// 将“xxxx年xx月xx日”的字符串转换成时间对象
const stringTransDate = (dateString) => {
    // 使用正则表达式或字符串分割来提取年、月、日
    const year = parseInt(dateString.match(/\d{4}/)[0], 10);
    const month = parseInt(dateString.match(/(\d{2})月/)[1], 10) - 1; // JavaScript 中月份是从 0 开始计数的
    const day = parseInt(dateString.match(/(\d{2})日/)[1], 10);

    // 创建新的 Date 对象
    const date = new Date(year, month, day);
    return date
}

const dateTransString = (date) => {
    // 获取年、月、日
    const year = date.getFullYear();
    const month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份是从 0 开始计数的，所以加 1，并补零
    const day = ("0" + date.getDate()).slice(-2); // 补零

    // 组装字符串
    const formattedDate = `${year}年${month}月${day}日`;
    return formattedDate
}

const dialogVisible = ref(false)

const formState = ref({})
const open = (data = {}) => {
    formState.value = {...data, projectId: data.fixedProjectId || data.equityProjectId }
    dialogVisible.value = true
}

const close = () => {
    dialogVisible.value = false

}

const onSubmit = () => {
    close()
    // const obj = { ...formState.value, startTime:  dateTransString(formState.value.startTime)}
    const obj = { ...formState.value }
    emit('finish', obj)
}

defineExpose({
    open
})

</script>

<template>
    <el-dialog
        v-model="dialogVisible"
        title="项目维护"
        width="40%"
        @close="close"
    >
    <el-form
        :model="formState"
        label-position="top"
        class="demo-form-inline"
        size="small"
    >
        <el-row>
            <el-col :span="24">
                <el-form-item label="项目名称">
                    <el-input v-model="formState.projectName" disabled/>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-form-item label="项目编码">
                    <el-input v-model="formState.projectId" disabled/>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20" v-if="props.type !== 'equity'">
            <el-col :span="12">
                <el-form-item label="发改固投入库">
                    <el-select
                        v-model="formState.inWarehouse"
                        placeholder="请选择"
                        style="width: 100%"
                    >
                        <el-option
                            label="不符合"
                            :value="0"
                        />
                        <el-option
                            label="符合"
                            :value="1"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="是否取得发票">
                    <el-select
                        v-model="formState.haveInvoice"
                        placeholder="请选择"
                        style="width: 100%"
                    >
                        <el-option
                            label="否"
                            :value="0"
                        />
                        <el-option
                            label="是"
                            :value="1"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="是否开工">
                    <el-select
                        v-model="formState.isDoing"
                        placeholder="请选择"
                        style="width: 100%"
                    >
                        <el-option
                            label="否"
                            :value="0"
                        />
                        <el-option
                            label="是"
                            :value="1"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="具体开工时间">
                    <!-- <el-date-picker
                        v-model="formState.startTime"
                        type="date"
                        placeholder="请输入时间"
                        format="YYYY年MM月DD日"
                        style="width: 100%"
                        size="large"
                    /> -->
                    <el-input v-model="formState.startTime" placeholder="输入时间，示例：2024年3月9日"/>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="项目状态">
                    <el-select
                        v-model="formState.projectStatus"
                        placeholder="请选择"
                        style="width: 100%"
                    >
                        <el-option
                            v-for="item in statusOfMaintennance"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-form-item label="项目进展描述">
                    <el-input type="textarea" :rows="2" v-model="formState.processDescription"/>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-form-item label="需协调解决的问题">
                    <el-input type="textarea" :rows="2" v-model="formState.coordinateRemark"/>
                </el-form-item>
            </el-col>
        </el-row>
        
    </el-form>
    <template #footer>
      <div style="display: flex; justify-content: center;">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="onSubmit">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-input__wrapper) {
    width: 100%;
}
</style>